<!--
- File:    关注列表.
-->
<template>
  <div class="Web_Box">
    <div
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="false"
      infinite-scroll-distance="0"
      infinite-scroll-immediate-check="false">
      <div class="bg_fff mb10" v-for="follow in followList.data" @click="gotoBlog(follow.member_id)">
        <div class="diary">
          <ul class=" f-cb">
            <li class="imgs">
              <a href="Personalhomepage.html"><img :src="follow.member_avatar ? $config.imgsite + $config.avatarSrc + follow.member_avatar + '_w150': defaultAvatar"></a>
            </li>
            <li class="pl20 w400"><a>
              <h3 class="d_tit">{{follow.member_name}}</h3>
              <p class="slh">{{follow.fans_num}}位粉丝</p>
            </a></li>
            <li v-if="self"><a @click.stop="delFollow(follow.member_id)" class="f_close">取消关注</a></li>
          </ul>
        </div>
      </div>
    </div>
    <loading-more :allLoaded="followList.allLoaded" :show="followList.data.length > 0"></loading-more>
    <empty-data :show="followList.allLoaded && followList.data.length <= 0"></empty-data>
    <footer-tab></footer-tab>
  </div>
</template>

<script>

  export default{
    data() {
      return {
        memberId: this.$route.params.id,
        self: false,
        defaultAvatar: require('../../../assets/images/avatar.png'),
        followList: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
      }
    },
    components: {},
    created() {
      this.self = this.memberId == this.$storage.getMemberInfo().member_id
      this.getFollowList(this.followList.page, this.followList.pageSize)
    },
    methods: {
      gotoBlog(memberId) {
        this.$router.push({name: 'blog-index', query: {member: memberId}})
      },
      gotoGoodsDetail(storeId, id) {
        this.$router.push({name: 'goods-detail', params: {id: id}, query: {storeId: storeId}})
      },
      getFollowList(page, pageSize) {
        this.followList.loading = true
        this.$request.getFollowList(page, pageSize, this.memberId).then(data => {
          if (data.length < this.followList.pageSize) {
            this.followList.allLoaded = true
          }
          this.followList.data = [...this.followList.data, ...data]
        }).finally(() => {
          this.followList.requested = true
          this.followList.loading = false
        })
      },
      loadMore() {
        if (this.followList.loading || this.followList.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getFollowList(++this.followList.page, this.followList.pageSize)
        }, 500)
      },
      delFollow(memberId) {
        this.$messageBox.confirm(`你确定要取消关注吗?`).then(action => {
          this.$request.delFollow(memberId).then(data => {
            this.$toast('取消关注成功')
            this.followList = {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
            this.getFollowList(this.followList.page, this.followList.pageSize)
          }).catch(e => {
            this.$toast('取消关注失败:' + e.msg)
          })
        }).catch(() => {
        })
      }
    }
  }
</script>

<style>

</style>